<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
    <view 
      class="info-modal-wrapper"
      :style="{backgroundImage:'url('+staticImgs.modalBg+')'}"
    >
      <view class="tit-wrapper">您已经领取过公众号关注奖励</view>  
      <view class="desc-wrapper">您可以持续关注我们获得更多专业心理的服务</view>
      <view class="btn-wrapper" @click="closeHandle">关闭</view>  
      
    </view>
  </u-popup>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        show:false,
        staticImgs:{
          modalBg:this.imgBaseURL + '/task-center/pannel-2-modal-bg.png',
        }
      }
    },
    watch:{
      visible:{
        handler(val){
          
          this.show = val
        },
        immediate:true
      }
    },
    methods: {
      closeHandle() {
        this.$emit('close')
      }
    },
  }
</script>

<style lang="scss" scoped>
  .info-modal-wrapper{
    height: 652rpx;
    width: 480rpx;
    
    background-size: 100% 100%;
    
    .tit-wrapper{
      margin-top:232rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: center;
      font-style: normal;
    }
    
    .desc-wrapper{
      
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #666666;
      line-height: 42rpx;
      text-align: center;
      font-style: normal;
      
      width: 348rpx;
      margin:auto;
      margin-top:40rpx;
    }
    
    .btn-wrapper{
      margin:auto;
      margin-top:70rpx;
      width: 340rpx;
      height: 80rpx;
      background: linear-gradient( 270deg, #FFB75B 0%, #FC6019 100%);
      border-radius: 40rpx;
      
      line-height:80rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
    }
  }
</style>